<template>
  <div class="gzl">
    <div class="search">
      <el-form :inline="true" :model="search" class="demo-form-inline">
        <el-form-item label="输入搜索">
          <el-input
            v-model="search.key"
            placeholder="请输入设备名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="输入时间">
          <el-date-picker
            v-model="search.time"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="chage"
          ></el-date-picker>
        </el-form-item>
        <el-form-item
        >
          <el-button type="primary" @click="onsubmit"
          >查询
          </el-button
          >
        </el-form-item
        >
      </el-form>
      <el-button class="ebtn" type="warning" @click="dialogVisible=true">新增返件</el-button>
    </div>
    <el-table class="table" stripe :data="ListData" style="width: 100%" height="580">
      <el-table-column type="index" label="序号" align="center" width="70"/>
      <el-table-column prop="applyTime" label="申请时间" align="center">
        <template v-slot="scope">
              <span>
                {{ formatTime(scope.row.applyTime) }}
              </span>
        </template>
      </el-table-column>
      <el-table-column prop="returnDate" label="返件日期" align="center">
        <template v-slot="scope">
              <span>
                {{ formatTime(scope.row.returnDate) }}
              </span>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" align="center">
        <template v-slot="scope">
          <span v-show="scope.row.status==1">待审核</span>
          <el-button v-if="scope.row.status == 2" type="text" size="medium"
                     @click="getBOhui(scope.row.checkFolwId)">驳回
          </el-button>
<!--          <span v-show="scope.row.status==2">驳回</span>-->
          <span v-show="scope.row.status==3">待发货</span>
          <span v-show="scope.row.status==4">待收货</span>
          <span v-show="scope.row.status==5">已收货</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button size="small" type="primary" v-if="scope.row.status==3" @click="fhan(scope.row.id)">发货</el-button>
          <el-button size="small" type="text" @click="xqsj(scope.row.id,scope.row.status)">详情</el-button>
        </template>
      </el-table-column>

    </el-table>
    <div class="pgnt">
      <el-pagination
        background
        layout="prev, pager, next"
        :current-page="current"
        :page-size="pagesize"
        @current-change="handleCurrentChange"
        :page-count="total"
      >
      </el-pagination>
    </div>
    <el-dialog
      title="发货详情"
      :visible.sync="dialogVisible_fahuo"
      width="70%"
      :modal-append-to-body="false">
      <div :data="tableArr">
        <div class="header">
          <template>
            <el-table
              :data="tableAdd.ListArr"
              style="width: 100%">
              <el-table-column
                type="index"
                label="序号"
                width="70px"
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="productName"
                label="物料名称"
                align="center">
              </el-table-column>
              <el-table-column
                prop="productTuhao"
                label="图号"
                align="center">
              </el-table-column>
              <el-table-column
                prop="returnNumber"
                label="返件数量"
                align="center">
              </el-table-column>
              <el-table-column
                prop="baozhiqiNumber"
                label="三包期数量"
                align="center">
              </el-table-column>
              <el-table-column
                prop="guoqiNumber"
                label="非三包期数量"
                align="center">
              </el-table-column>
              <el-table-column
                prop="tianhuoTime"
                label="调货日期"
                align="center">
                <template v-slot="scope">
              <span>
                {{ formatTime(scope.row.tianhuoTime) }}
              </span>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </div>
        <p
          style="margin-top: 10px; border-bottom: 1px solid rgb(220, 222, 226); padding-bottom: 10px; font-weight: 700">
          收货地址</p>
        <div class="intermediate">
          <ul>
            <li>
              <span>企业名称</span>
              <el-input style="width: 70%" v-model="tableArr.companyName"></el-input>
            </li>
            <li>
              <span>收货人</span>
              <el-input style="width: 70%" v-model="tableArr.contact"></el-input>
            </li>
            <li>
              <span>联系方式</span>
              <el-input style="width: 70%" v-model="tableArr.phone"></el-input>
            </li>
            <li>
              <span>收货地址</span>
              <el-input style="width: 70%" v-model="tableArr.adress"></el-input>
            </li>
          </ul>
        </div>
        <div style="display: flex;
				align-items: center;">
          <p
            style="margin-top: 10px; border-bottom: 1px solid rgb(220, 222, 226);padding-right: 10px; padding-bottom: 10px; font-weight: 700">
            运输方式 :</p>
          <template>
            <el-radio v-model="radio" label="1">快递</el-radio>
            <el-radio v-model="radio" label="2">自送</el-radio>
          </template>
        </div>
        <div class="footer-kuai">
          <ul v-if="radio== '1'">
            <div class="pbox">
              <p>快递</p>
            </div>
            <li>
              <span>快递公司</span>
              <template>
                <el-input style="width: 70%;" v-model="tableArr.courierCompany" ></el-input>
              </template>
            </li>
            <li>
              <span>快递单号</span>
              <el-input style="width: 70%;" v-model="tableArr.courierNumber" ></el-input>
            </li>

          </ul>
          <ul v-if="radio == '2'">
            <div class="pbox">
              <p>自送</p>
            </div>

            <li>
              <span>车牌号</span>
              <el-input style="width: 70%;" v-model="tableArr.carNumber" ></el-input>
            </li>
            <li>
              <span>司机姓名</span>
              <el-input style="width: 70%;" v-model="tableArr.driver" ></el-input>
            </li>
            <li>
              <span>联系方式</span>
              <el-input style="width: 70%;" v-model="tableArr.courierNumber" ></el-input>
            </li>
          </ul>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">

           <el-button type="primary" @click="fahuoList()">确 定</el-button>
    <el-button @click="dialogVisible_fahuo = false">取 消</el-button>


  </span>
    </el-dialog>
    <el-dialog
      title="新增返件"
      :visible.sync="dialogVisible"
      width="75%"
      :modal-append-to-body="false">
      <div class="header">
        <template>
          <el-table
            :data="tableData"
            style="width: 100%">
            <el-table-column
              type="index"
              label="序号"
              width="70px"
              align="center"
            >
            </el-table-column>
            <el-table-column
              label="物料名称">
              <template slot-scope="scope">
                <el-select
                  v-model="scope.row.productName"
                  @change="GetProMess(scope.$index,$event)"
                  value-key="id"
                  placeholder="请选择名称"
                >
                  <el-option
                    v-for="item in productLists"
                    :key="item.id"
                    :label="item.productName"
                    :value="item"
                  >
                  </el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column
              label="图号">
              <template slot-scope="scope">
                <el-input v-model="scope.row.productTuhao"></el-input>
              </template>
            </el-table-column>
            <el-table-column
              prop="address"
              label="返件数量">
              <template slot-scope="scope">
                <el-input v-model="scope.row.returnNumber" disabled></el-input>
              </template>
            </el-table-column>
            <el-table-column
              prop="address"
              label="三包期数量">
              <template slot-scope="scope">
                <el-input v-model="scope.row.baozhiqiNumber" @input="jisuan(scope.$index)"></el-input>
              </template>
            </el-table-column>
            <el-table-column
              prop="address"
              label="非三包期数量">
              <template slot-scope="scope">
                <el-input v-model="scope.row.guoqiNumber=0" disabled></el-input>
              </template>
            </el-table-column>
            <el-table-column
              label="调货日期"
              width="190px"
            >
              <template slot-scope="scope">
                <el-date-picker
                  v-model="scope.row.tianhuoTime"
                  type="date"
                  placeholder="选择日期"
                  format="yyyy 年 MM 月 dd 日"
                  value-format="yyyy-MM-dd"
                  style="width: 100%"
                ></el-date-picker>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button type="primary" size="small" @click="addDomain"
                >新增
                </el-button
                >
                <el-button
                  type="danger"
                  @click="resetForm(scope)"
                  v-if="scope.$index !== 0"
                  size="small"
                >删除
                </el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </template>
      </div>
      <span slot="footer" class="dialog-footer">
         <el-button type="primary" @click="add()">确 定</el-button>
    <el-button @click="dialogVisible = false">取 消</el-button>

  </span>
    </el-dialog>
    <el-dialog
      title="发货详情"
      :visible.sync="dialogVisible1"
      width="70%"
      :modal-append-to-body="false">
      <div :data="tableAdd">
        <div class="header">
          <template>
            <el-table
              :data="tableAdd.ListArr"
              style="width: 100%">
              <el-table-column
                type="index"
                label="序号"
                width="70px"
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="productName"
                label="物料名称"
                align="center">
              </el-table-column>
              <el-table-column
                prop="productTuhao"
                label="图号"
                align="center">
              </el-table-column>
              <el-table-column
                prop="returnNumber"
                label="返件数量"
                align="center">
              </el-table-column>
              <el-table-column
                prop="baozhiqiNumber"
                label="三包期数量"
                align="center">
              </el-table-column>
              <el-table-column
                prop="guoqiNumber"
                label="非三包期数量"
                align="center">
              </el-table-column>
              <el-table-column
                prop="tianhuoTime"
                label="调货日期"
                align="center">
                <template v-slot="scope">
              <span>
                {{ formatTime(scope.row.tianhuoTime) }}
              </span>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </div>
        <p
          style="margin-top: 10px; border-bottom: 1px solid rgb(220, 222, 226); padding-bottom: 10px; font-weight: 700">
          收货地址</p>
        <div class="intermediate">
          <ul>
            <li>
              <span>企业名称</span>
              <el-input style="width: 70%" v-model="tableAdd.companyName" disabled></el-input>
            </li>
            <li>
              <span>收货人</span>
              <el-input style="width: 70%" v-model="tableAdd.contact" disabled></el-input>
            </li>
            <li>
              <span>联系方式</span>
              <el-input style="width: 70%" v-model="tableAdd.phone" disabled></el-input>
            </li>
            <li>
              <span>收货地址</span>
              <el-input style="width: 70%" v-model="tableAdd.adress" disabled></el-input>
            </li>
          </ul>
        </div>
        <p
          style="margin-top: 10px; border-bottom: 1px solid rgb(220, 222, 226); padding-bottom: 10px; font-weight: 700">
          运输方式 :</p>
        <div class="footer-kuai">
          <ul v-if="tableAdd.type == 1">
            <div class="pbox">
              <p>快递</p>
            </div>
            <li>
              <span>快递公司</span>
              <template>
                <el-input style="width: 70%;" v-model="tableAdd.courierCompany" disabled></el-input>
              </template>
            </li>
            <li>
              <span>快递单号</span>
              <el-input style="width: 70%;" v-model="tableAdd.courierNumber" disabled></el-input>
            </li>

          </ul>
          <ul v-if="tableAdd.type == 2">
            <div class="pbox">
              <p>自送</p>
            </div>

            <li>
              <span>车牌号</span>
              <el-input style="width: 70%;" v-model="tableAdd.carNumber" disabled></el-input>
            </li>
            <li>
              <span>司机姓名</span>
              <el-input style="width: 70%;" v-model="tableAdd.driver" disabled></el-input>
            </li>
            <li>
              <span>联系方式</span>
              <el-input style="width: 70%;" v-model="tableAdd.courierNumber" disabled></el-input>
            </li>
          </ul>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
         <el-button type="primary" @click="dialogVisible1 = false">确 定</el-button>
    <el-button @click="dialogVisible1 = false">取 消</el-button>

  </span>
    </el-dialog>
    <el-dialog
      title="返件详情"
      :visible.sync="dialogVisible2"
      width="70%"
      :modal-append-to-body="false">
      <div class="header">
        <template>
          <el-table
            :data="tableAdd.ListArr"
            style="width: 100%">
            <el-table-column
              type="index"
              label="序号"
              width="70px"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="productName"
              label="物料名称"
              align="center">
            </el-table-column>
            <el-table-column
              prop="productTuhao"
              label="图号"
              align="center">
            </el-table-column>
            <el-table-column
              prop="returnNumber"
              label="返件数量"
              align="center">

            </el-table-column>
            <el-table-column
              prop="baozhiqiNumber"
              label="三包期数量"
              align="center">

            </el-table-column>
            <el-table-column
              prop="guoqiNumber"
              label="非三包期数量"
              align="center">

            </el-table-column>
            <el-table-column
              prop="tianhuoTime"
              label="调货日期"
              align="center"
            >
              <template v-slot="scope">
              <span>
                {{ formatTime(scope.row.tianhuoTime) }}
              </span>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </div>
      <span slot="footer" class="dialog-footer">
         <el-button type="primary" @click="dialogVisible2 = false">确 定</el-button>
    <el-button @click="dialogVisible2 = false">取 消</el-button>

  </span>
    </el-dialog>

    <el-dialog
      title="驳回详情"
      :visible.sync="dialogVisible_bohui"
      width="50%"
      :modal-append-to-body="false">
      <ul :data="bohuilist" class="bohuizujian">
        <li>
          <span>审核日期</span>
          <el-input v-model="bohuilist.checkTime" style="width: 70%;" disabled></el-input>
        </li>
        <li>
          <span>审核人</span>
          <el-input v-model="bohuilist.userName" style="width: 70%;" disabled></el-input>
        </li>
        <li>
          <span>驳回理由</span>
          <el-input v-model="bohuilist.bohuiReason" style="width: 70%;" disabled></el-input>
        </li>
      </ul>
      <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="dialogVisible_bohui = false">返 回</el-button>
  </span>
    </el-dialog>
  </div>
</template>
<script>
import axios from 'axios'

export default {
  components: {},
  data() {
    return {
      dialogVisible_bohui: false,
      bohuilist:{
        bohuiReason:"",
        checkTime:"",
        userName:"",
      },
      search: {key: "", start: "", end: ""},
      tableData: [{}],
      total: 1,
      current: 1,
      pagesize: 10,
      dialogVisible: false,
      dialogVisible1: false,
      dialogVisible2: false,
      dialogVisible_fahuo: false,
      radio: "1",
      value: "",
      ListData: [],
      productLists: [],
      tableAdd: {
        ListArr: [],
        phone: "",
        adress: "",
        contact: "",
        companyName: "",
        //快递
        courierCompany: "",
        courierNumber: "",
        //自送
        type: "",
        driver: "",
        carNumber: "",
        driverPhone: "",

      },

      tableArr:{
        phone: "",
        adress: "",
        contact: "",
        companyName: "",
        //快递
        courierCompany: "",
        courierNumber: "",
        //自送
        type: "",
        driver: "",
        carNumber: "",
        driverPhone: "",
      },
      Usersid:"",
    };
  },
  //监听属性 类似于data概念",
  computed: {},
  //监控data中的数据变化",
  watch: {},
  //方法集合",
  methods: {
    getBOhui(checkflowId) {
      this.dialogVisible_bohui = true
      axios("/JX_java/procurement/getCheckFlowDetails?checkFlowId=" + checkflowId).then((res) => {
        console.log(res)
        let relse = res.data.data
        this.bohuilist = relse
        console.log(this.bohuilist)
      })
    },


    xqsj(id, statu) {
      if (statu == 4) {
        this.dialogVisible1 = true
      } else if (statu == 5) {
        this.dialogVisible1 = true
      } else {
        this.dialogVisible2 = true
      }
      this.getXq(id)
    },
    fhan(id) {
      this.dialogVisible_fahuo = true
      this.getXq(id)
      this.Usersid = id
      console.log(this.Usersid)
    },
    fahuoList() {
      const parm = {
        "adress": this.tableArr.adress,
        "carNumber": this.tableArr.carNumber,
        "companyName": this.tableArr.companyName,
        "contact": this.tableArr.contact,
        "courierCompany": this.tableArr.courierCompany,
        "courierNumber": this.tableArr.courierNumber,
        "createonTime": this.tableArr.createonTime,
        "driverPhone": this.tableArr.driverPhone,
        "phone": this.tableArr.phone,
        "driver": this.tableArr.driver,
        "shenghemessageId": this.Usersid,
        "type": parseInt(this.radio),
        productReturns: [],
      }
      this.tableAdd.ListArr.forEach(e => {
        let dd = {
          "baozhiqiNumber": 0,
          "guoqiNumber": 0,
          "id": 0,
          "productName": "",
          "productTuhao": "",
          "returnNumber": 0,
          "shenghemessageId": 0,
          "siteId": 0,
          "tianhuoTime": ""
        }
        dd.baozhiqiNumber = e.baozhiqiNumber;
        dd.guoqiNumber = e.guoqiNumber;
        dd.productName = e.productName;
        dd.productTuhao = e.productTuhao;
        dd.returnNumber = e.returnNumber
        dd.tianhuoTime = e.tianhuoTime
        parm.productReturns.push(dd)
      })
      console.log(parm)
      // return
      axios.post("/JX_java/site/productReturn/addCompanyAddress", parm).then(res => {
        console.log(res.data.data)
        if (res.data.data == "操作成功") {
          this.$message.success(res.data.data);
          this.dialogVisible_fahuo = false
          this.tableArr = {
            phone: "",
            adress: "",
            contact: "",
            companyName: "",
            //快递
            courierCompany: "",
            courierNumber: "",
            //自送
            type: "",
            driver: "",
            carNumber: "",
            driverPhone: "",
          }
          // this.dialogVisible_xu_0 = false
          this.getList();
        } else {
          this.$message.error(res.data.data);
        }
      })

    },
    //计算
    jisuan(ind) {
      console.log(this.tableData[ind])
      this.tableData[ind].returnNumber = parseInt(this.tableData[ind].baozhiqiNumber) + 0
      console.log(this.tableData[ind].returnNumber)
    },


    //联动
    GetProMess(ind, e) {
      this.tableData[ind].productName = e.productName;
      this.tableData[ind].id = e.id;
      this.tableData[ind].productTuhao = e.productTuhao

    },
    getXq(id) {
      axios("/JX_java/site/productReturn/getProductReturnDetails?shenghemessageId=" + id).then((res) => {
        let Add = res.data.data;
        this.tableAdd = Add
        this.tableAdd.ListArr = Add.productReturns
        // console.log(this.tableAdd, 22222222222222222222222)
      });
    },
    // 获取供应商 产品
    getCai() {
      axios("/JX_java/common/getSitePartsList").then((res) => {
        let result = res.data.data;
        this.productLists = result;
      });
    },
    //时间格式化
    formatTime(data) {
      return data == null ? "" : data.substring(0, 10);
    },
    //获取
    getList() {
      const json = {
        beginTime: this.search.start,
        endTime: this.search.end,
        key: this.search.key,
        pageNum: this.current,
        pageSize: this.pagesize,
      };
      axios
        .post(
          "/JX_java/site/productReturn/getProductReturnList?siteId=" + this.siteId,
          json
        )
        .then((res) => {
          const relse = res.data.data.content
          this.ListData = relse;
          this.total= res.data.data.totalPages
          console.log(this.ListData, 11111111111111111111)
        });
    },
    add() {

      let param = [];
      this.tableData.forEach(e => {
        const product = {
          "baozhiqiNumber": 0,
          "guoqiNumber": 0,
          "id": null,
          "productName": "",
          "productTuhao": "",
          "returnNumber": 0,
          "shenghemessageId": 0,
          "siteId": 0,
          "tianhuoTime": ""
        }
        product.baozhiqiNumber = parseInt(e.baozhiqiNumber);
        product.guoqiNumber = e.guoqiNumber;
        product.returnNumber = e.returnNumber;
        product.productName = e.productName
        product.productTuhao = e.productTuhao
        product.tianhuoTime = e.tianhuoTime
        product.siteId = this.siteId
        param.push(product);
      })
      console.log(this.tableData, 333333333333333)
      // return
      axios
        .post("/JX_java/site/productReturn/addreturnProductReturn?userId=" + this.userId, param)
        .then((res) => {
          if (res.data.data == "操作成功") {
            this.$message.success(res.data.data);
            this.dialogVisible = false
            this.tableData =[{}]
            this.getList()
          } else {
            this.$message.error(res.data.data);
          }
        });
    },

    onsubmit() {
      this.getList();
    },
    chage(e) {
      if (e) {
        this.search.start = e[0];
        this.search.end = e[1];
      } else {
        this.search.start = "";
        this.search.end = "";
      }
    },

    // 分页
    handleCurrentChange(e) {
      this.current = e
      this.getList();
    },

    //新增采购-------动态添加
    addDomain() {
      const list = {
        productName: "",
      };
      this.tableData.push(list);
    },
    //新增采购-------动态删除
    resetForm(e) {
      console.log(e);
      this.tableData.splice(e.$index, 1);
    },
  },
  //生命周期 - 创建之前",数据模型未加载,方法未加载,html模板未加载
  beforeCreate() {
  },
  //生命周期 - 创建完成（可以访问当前this实例）",数据模型已加载，方法已加载,html模板已加载,html模板未渲染
  created() {
    this.siteId = JSON.parse(localStorage.getItem("listDataArr")).id
    this.userId = JSON.parse(localStorage.getItem("message")).Id
    this.getList()
    this.getCai();
  },
  //生命周期 - 挂载之前",html模板未渲染
  beforeMount() {
  },
  //生命周期 - 挂载完成（可以访问DOM元素）",html模板已渲染
  mounted() {
  },
  //生命周期 - 更新之前",数据模型已更新,html模板未更新
  beforeUpdate() {
  },
  //生命周期 - 更新之后",数据模型已更新,html模板已更新
  updated() {
  },
  //生命周期 - 销毁之前",
  beforeDestroy() {
  },
  destroyed() {
  },
  //生命周期 - 销毁完成",
  //如果页面有keep-alive缓存功能，这个函数会触发",
  activated() {
  },
}
</script>
<style lang="scss" scoped>
.bohuizujian{
  display: flex;
  flex-wrap: wrap;
  li{
    width: 33%;
    padding-top: 10px;
    text-align: center;
    span{
      display: inline-block;
      width: 25%;
    }
  }
}
.gzl {
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 10px;
}

.table {
  margin-bottom: 20px;
}

.pgnt {
  text-align: center;
}

.demo-form-inline {
  display: inline-block;
}

.search {
  height: 50px;
  border-radius: 5px;
  background-color: #fff;
  padding-left: 20px;
  padding-top: 10px;
  margin-bottom: 20px;
  overflow: hidden;
}

.ebtn {
  float: right;
  margin-right: 20px;
}

/deep/ .is-leaf {
  text-align: center;
  background: #fff;
}

.header {
  border-bottom: 1px solid rgb(220, 222, 226);
}

.intermediate {
  border-bottom: 1px solid rgb(220, 222, 226);
  //width: 98%;
  margin: auto;
  padding-bottom: 20px;


  ul {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    color: #909399;
    margin-top: 20px;

    li {

      width: 33%;
      font-size: 14px;
      margin-bottom: 10px;
      text-align: center;

      div {
        margin-top: 5px;
      }

      span {
        display: inline-block;
        width: 25%;
      }
    }
  }
}

.footer-top {
  margin-top: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgb(220, 222, 226);

  span {
    margin-right: 10px;
  }
}

.footer-kuai {
  ul {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    //align-items: center;
    color: #909399;
    margin-top: 20px;

    .pbox {
      display: flex;
      align-items: center;

      p {
        padding-right: 20px;
        margin-bottom: 10px;
      }
    }

    li {
      width: 20%;
      font-size: 14px;
      margin-bottom: 10px;
      //text-align: center;
      margin-right: 10px;
      //vertical-align: middle;
      .el-button {
        //margin-top: 18px;
      }

      span {
        display: inline-block;
        width: 28%;
        margin-bottom: 10px;
      }
    }

    .el-button-box {
      //ext-align: center; t
      display: flex;
      align-items: flex-end

    }
  }
}

///deep/ .cell {
//  text-align: center;
//}
</style>
